<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>爱家-登陆</title>
    <link href="/static/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="/static/css/reset.css" rel="stylesheet">
    <link href="/static/css/ihome/main.css" rel="stylesheet">
    <link href="/static/css/ihome/login.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="logo-bar"><a href="/"><img src="/static/images/logo@128x59.png"></a></div>
        <form class="form-login">
            <div class="form-group form-group-lg">
                <div class="input-group">
                    <div class="input-group-addon"><i class="fa fa-user fa-lg fa-fw"></i></div>
                    <input type="number" class="form-control" name="mobile" id="mobile" placeholder="手机号" required>
                </div>
            </div>
            <div class="error-msg" id="mobile-err"><i class="fa fa-exclamation-circle"></i><span></span></div>
            <div class="form-group form-group-lg">
                <div class="input-group">
                    <div class="input-group-addon"><i class="fa fa-lock fa-lg fa-fw"></i></div>
                    <input type="password" class="form-control" name="password" id="password" placeholder="密码" required>
                </div>
            </div>
            <div class="error-msg" id="password-err"><i class="fa fa-exclamation-circle"></i><span></span></div>
            <button type="submit" class="btn btn-lg btn-theme btn-block">登录</button>
            <p class="register-a">没有账号，<a href="/register.html">立即注册</a></p>
        </form>
    </div>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script>
        function getCookie(name) {
            var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
            return r ? r[1] : undefined;
        }

        $(document).ready(function () {
            $("#mobile").focus(function () {
                $("#mobile-err").hide();
            });
            $("#password").focus(function () {
                $("#password-err").hide();
            });
            $(".form-login").submit(function (e) {
                e.preventDefault();
                mobile = $("#mobile").val();
                passwd = $("#password").val();
                if (!mobile) {
                    $("#mobile-err span").html("请填写正确的手机号！");
                    $("#mobile-err").show();
                    return;
                }
                if (!passwd) {
                    $("#password-err span").html("请填写密码!");
                    $("#password-err").show();
                    return;
                }
                var req_data = {
                    mobile: mobile,
                    password: passwd,
                };
                var req_json = JSON.stringify(req_data);
                $.ajax({
                    url: "/api/v1/login",
                    type: "post",
                    data: req_json,
                    contentType: "application/json",
                    dataType: "json",
                    headers: {
                        "X-CSRFToken": getCookie("csrf_token")
                    }, // 请求头，将csrf_token值放到请求中，方便后端csrf进行验证
                    success: function (resp) {
                        if (resp.errno == "0") {
                            // 登录成功，跳转到主页
                            location.href = "/index.html";
                        } else {
                            alert(resp.errmsg);
                        }
                    }
                })
            });
        })
    </script>
</body>

</html>